<template>
  <div class="num-to-string">
    <a-form :model="form" label-width="100px">
      <a-form-item label="数值">
        <a-input
          v-model:value.number="form.num"
          @input="
            () => {
              numString = trans(form.num)
            }
          "
        ></a-input>
      </a-form-item>
      <a-form-item label="中文">
        <span>{{ numString }}</span>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const form = ref({ num: null })
const numString = ref<String>('')

// 定义一个将数字转换为中文数字的函数
const trans = (num: Number | null): String => {
  if (num === null) return '零'
  // 如果数字为0，直接返回'零'
  if (num === 0) return '零'
  // 定义数字字符串数组
  const numStrs = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
  // 定义数字单位数组
  const unit1 = ['', '十', '百', '千']
  const unit2 = ['', '万', '亿', '万']
  let numStr = num.toString() // 将数字转换为字符串
  let result = '' // 存储转换后的中文数字
  for (let index = 0; index < numStr.length; index++) {
    const item = parseInt(numStr[numStr.length - index - 1]) // 获取当前位的数字
    if (index % 4 === 0) {
      // 每四个数字为一级，添加亿、万亿单位
      result = (item !== 0 ? numStrs[item] : '') + unit2[index / 4] + result
    } else {
      if (numStr[numStr.length - index] !== '0')
        // 当前位数字不为零，添加数字和单位
        result = numStrs[item] + (item !== 0 ? unit1[index % 4] : '') + result
      else if (item !== 0)
        // 当前位数字为零，添加单位
        result = numStrs[item] + unit1[index % 4] + result
    }
  }
  return result // 返回转换后的中文数字
}
</script>
<style lang="scss" scoped>
.num-to-string {
}
</style>
